<template>
  <!-- 用户经营 -->
  <main class="wss-container">
    <div class="label-box-content">
      <NewCard :isright="true" title="用户经营" >
        <template #right>
          <ComForm :config="config" :list="comForm" ></ComForm>
        </template>
        <div class="userTalbe">
          <ComTable
            :config="config"
            :pagination="{
              total: pageing.total,
              pageNum: pageing.pageNum,
              pageSize: pageing.pageSize,
            }"
            :list="labelData"
            :modes="tableModes"
          >
            <el-table-column align="left" width="100" label="操作">
              <template>
                <span
                  style="color: #1890ff"
                  v-hasPermi="['base:label:edit']"
                  >财务列表</span>
                <span
                  style="color: #1890ff"
                  v-hasPermi="['base:label:edit']"
                  >发票信息</span>
                <span
                  class="el-icon-phone-outline"
                  v-hasPermi="['base:label:edit']"
                  >电话</span>
              </template>
            </el-table-column>
          </ComTable>
        </div>
      </NewCard>

      <el-button
        @click="drawer = true"
        type="primary"
        style="margin-left: 16px"
      >
        财务列表
      </el-button>
      <Comdrawer
        size="60%"
        title="财务列表"
        @eventColse="handleClose"
        :drawer="drawer"
      >
        <div class="businEdit">
          <el-table
            :data="rechargeList"
            border
            :summary-method="getSummaries"
            show-summary
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="date" label="日期"> </el-table-column>
            <el-table-column prop="behavior" label="行为"> </el-table-column>
            <el-table-column prop="topUpWay" label="充值方式">
            </el-table-column>
            <el-table-column prop="orderNumber" label="订单号">
            </el-table-column>
            <el-table-column prop="money" label="金额"> </el-table-column>
            <el-table-column prop="askMoney" label="问金"> </el-table-column>
            <el-table-column prop="surplus" label="结余"> </el-table-column>
          </el-table>
        </div>
      </Comdrawer>

      <el-button
        @click="invoice = true"
        type="primary"
        style="margin-left: 16px"
      >
        发票信息
      </el-button>
      <Comdrawer
        size="60%"
        title="发票信息"
        @eventColse="invoiceClose"
        :drawer="invoice"
      >
        <div class="businEdit">
          <el-table
            :data="invoiceInfo"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="type" label="发票类型"> </el-table-column>
            <el-table-column width="80px" prop="titleType" label="抬头类型">
            </el-table-column>
            <el-table-column prop="invoiceTitle" label="发票抬头">
            </el-table-column>
            <el-table-column prop="dutyNum" label="税号"> </el-table-column>
            <el-table-column prop="regAddress" label="注册地址">
            </el-table-column>
            <el-table-column prop="depositBank" label="开户银行">
            </el-table-column>
            <el-table-column prop="bankAccount" label="银行账号">
            </el-table-column>
            <el-table-column prop="invoiceValue" label="发票金额">
            </el-table-column>
          </el-table>
        </div>
      </Comdrawer>
    </div>
  </main>
</template>

<script>
import NewCard from "../../../components/newCard.vue";
import ComForm from "../../../components/comForm.vue";
import ComTable from "../../../components/comTable.vue";
import Comdrawer from "../../../components/Comdrawer.vue";
export default {
  name: "userManage",
  components: { NewCard, ComForm, ComTable, Comdrawer },
  data() {
    return {
      // 表格配置
      config: {
        quanxian: "base:label:add",
        // border: true,
        isAdd: true,
        loading: false,
      },
      // 表单选项
      comForm: {
        modes: [
          {
            placeholder: "请输入充值用户ID",
            formType: "input",
            mode: "userId",
            label: "",
            value: "",
          },
          {
            placeholder: "请输入用户昵称",
            formType: "input",
            mode: "nickname",
            label: "",
            value: "",
          },
          {
            placeholder: "请输入手机号",
            formType: "input",
            mode: "cellNumber",
            label: "",
            value: "",
            select: [],
          },
        ],
      },
      // 标签数据
      labelData: [],
      // 表格参数
      tableModes: [
        {
          label: "用户昵称",
          mode: "nickname",
          showOverflowTooltip: true,
        },
        {
          label: "用户ID",
          mode: "userId",
        },
        {
          label: "用户标签",
          mode: "label",
        },
        {
          label: "手机号",
          mode: "phoneNumber",
          showOverflowTooltip: true,
        },
        {
          label: "绑定邮箱",
          mode: "email",
        },
        {
          label: "累计充值",
          mode: "number",
        },
        {
          label: "关注标签",
          mode: "focusLabel",
        },
        {
          label: "注册时间",
          mode: "regDate",
        },
      ],
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      //财务列表抽屉是否弹出
      drawer: false,
      //财务列表抽屉 从右侧弹出
      direction: "rtl",
      //发票信息抽屉是否弹出
      invoice: false,

      //财务列表抽屉 表格数据
      rechargeList: [
        {
          date: "2022-04-01",
          behavior: "充值",
          topUpWay: "微信支付",
          orderNumber: "No0000001",
          money: "1000",
          askMoney: "1200",
          surplus: "1200",
        },
        {
          date: "2022-04-01",
          behavior: "消费",
          topUpWay: "",
          orderNumber: "No0000002",
          money: "-200",
          askMoney: "-200",
          surplus: "1000",
        },
        {
          date: "2022-04-01",
          behavior: "充值",
          topUpWay: "微信支付",
          orderNumber: "No0000003",
          money: "400",
          askMoney: "410",
          surplus: "1410",
        },
      ],
      invoiceInfo: [
        {
          type: "增值税专用发票",
          titleType: "企业",
          invoiceTitle: "某某科技有限公司",
          dutyNum: "91330000MA000000X3",
          regAddress: "东莞市南城街道三元里保利陇远国际广场1707",
          depositBank: "工商银行某支行",
          bankAccount: "91330000MA000000X3",
          invoiceValue: "18000",
        },
      ],
    };
  },
  methods: {
    //抽屉的显示隐藏
    handleClose() {
      this.drawer = false;
    },
    invoiceClose() {
      this.invoice = false;
    },
    //计算财务列表合计
    getSummaries(param) {
      const { columns, data } = param;
      const len = columns.length;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        if (index === 2) {
          sums[index] = "N/A";
          return;
        }
        if (index === len - 1) {
          sums[index] = "";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },
  },
};
</script>

<style scoped>
.label-box-content {
  position: relative;
}
.label-box-content >>> .top::after {
  height: 1px;
  background-color: #e6ebf5;
}
/* 标题筛选 */
.userFilter {
  position: absolute;
  right: 30px;
  top: 10px;
}
>>> .el-form-item {
  width: auto;
  margin-bottom: 0;
}
.userFilter >>> .el-form-item__content {
  width: 160px;
}
.userFilter >>> .left .el-form-item:last-child .el-form-item__content {
  width: 195px;
}
.userFilter >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.userFilter >>> .container .right {
  margin-top: 0;
}

/* 财务列表 */
.businEdit {
  padding: 0 30px;
}
</style>